<template>
	<view class="top" :style="navHeight">
		<view class="top-content" :style="navHeight">
			<view class="top-list" :style="topHeight">
				<view class="top-item" v-if="type == 'logo'" :style="topLeft+';'+navContentWidth"><image src="/static/logo.png" mode="widthFix"></image></view>
				<view class="top-item" v-else :style="topLeft+';'+navContentWidth"><image src="/static/logo.png" mode="widthFix"></image></view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name:"m-navbar",
		data() {
			return {
				navHeight:'',
				topHeight:'',
				topLeft:'',
				navContentWidth:''
			};
		},
		props:{
			type:{
				type:String,
				default:'logo'
			}
		},
		beforeMount() {
			console.log(111)
			this.countHeight();
		},
		methods:{
			countHeight() {
				let statusBarHeight = uni.getSystemInfoSync().statusBarHeight,
					navTop = uni.getMenuButtonBoundingClientRect().top,
					capsule = uni.getMenuButtonBoundingClientRect(),
					window = uni.getSystemInfoSync(),
					differ = (navTop - statusBarHeight) * 2,
					navHeight = statusBarHeight + differ + capsule.height;
				console.log(capsule,22);
				this.navContentWidth = 'width:' + capsule.left + 'px;';
				console.log(this.navContentWidth,11);
				this.navHeight = 'height:' + navHeight + 'px;';
				this.topHeight = 'margin-top:' + navTop + 'px;' + 'height:' + capsule.height + 'px;';
				this.topLeft = 'padding:0 ' + (window.windowWidth - capsule.right) + 'px;';
			},
		}
	}
</script>

<style lang="scss" scoped>
.top {
	width: 100vw;
	.top-content {
		background-color: #5500ff;
		width: inherit;
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		z-index: 99;
		.top-list {
			display: flex;
			justify-content: flex-start;
			align-items: center;
			.top-item {
				line-height: inherit;
				height: inherit;
				text-align: center;
				font-size: 36rpx;
				color: #ffffff;
				display: flex;
				justify-content: center;
				flex-direction: column;
				box-sizing: border-box;
				image {
					width: 160rpx;
					height: 52rpx;
				}
			}
		}
	}
}
</style>
